<template>
    <div class="ep-table">
        <el-popover v-if="titleFilter.length>0"
                    placement="top-start"
                    title="当前列"
                    width="300"
                    trigger="click">
            <el-checkbox-group v-model="list">
                <el-checkbox v-for="(item,index) in titleFilter" :key="index" :label="item" :title="item">{{item}}
                </el-checkbox>
            </el-checkbox-group>
            <div class="ep-title-filter" slot="reference">
                <el-button type="text" size="mini" icon="iconfont ep-icon-filter"></el-button>
            </div>
        </el-popover>
        <el-table
                ref="multipleTable"
                :height="height"
                :data="data.Data"
                style="width: 100%"
                @row-dblclick="rowDblclick"
                @cell-dblclick="cellDbClick">
            <slot></slot>
        </el-table>
        <el-pagination
                v-if="pager > 0"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="0"
                :page-sizes="[20, 40, 60, 100]"
                :page-size="pager"
                layout="total, sizes, prev, pager, next, jumper"
                :total="data.total">
        </el-pagination>
    </div>
</template>

<script type="es6">
    export default {
        props: {
            data: {
                type: Object,
                default: () => {
                    return {
                        total: 0,
                        Data: []
                    }
                }
            },
            height: String,
            rowDbClick: {
                type: Boolean,
                default: false
            },
            pager: {
                type: Number,
                default: function () {
                    return 0;
                }
            },
            name: String,
            api: {
                type: String,
                default: function () {
                    return 'doQuery';
                }
            },
            titleFilter: {
                type: Array,
                default: () => []
            },
            pathName:{
                type: String,
                default:'tableData'
            },
            isCodeType: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                index: 0,
                page: 0,
                list: []
            }
        },
        mounted() {
            if (this.$children[1] && this.$children[1].$children && this.$children[1].$children.length > 0) {
                this.$children[1].$children.map(item => {
                    if (!item.hidden) {
                        this.list.push(item.header);
                    }
                })
            }
            this.$store.dispatch('SET_CLICK', this.rowDbClick);
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                let api = this.api === '' ? 'doQuery' : this.api;
                let params = {};
                params[this.name] = this.data;
                params['page'] = this.page || 0;
                params['size'] = val;
                let obj = {
                    path: this.$route.path + '/' + api + '/' + this.id,
                    ...params
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                let api = this.api === '' ? 'doQuery' : this.api;
                let params = {};
                params[this.name] = this.data;
                params['page'] = val;
                params['size'] = this.pager;
                this.page = val;
                let obj = {
                    path: this.$route.path + '/' + api + '/' + this.id,
                    ...params
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            cellDbClick(row, column) {
                if (!this.rowDbClick) return;
                this.index = this.index + 1;
                this.$store.dispatch('SET_COLUMN', column.property);
                let index = this.data.Data.indexOf(row);
                this.$store.dispatch('SET_INDEX', index);
                this.$store.commit('SET_ROW', row);
                this.index = 0;
            },
            rowDblclick(row, column) {
                let index = this.data.Data.indexOf(row);
                this.$store.dispatch('SET_ROWINDEX', index);
            }
        }
    }
</script>

<style lang="less" scoped>
    .ep-table {
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        flex: 1;
        width: 100%;
        max-width: 100%;
        background-color: #fff;
        font-size: 14px;
        color: #606266;
    }

    .ep-title-filter {
        background: #fafbfa;
        position: absolute;
        z-index: 1000;
        right: 10px;
        top: 1px;
        display: flex;
        align-items: center;
        min-height: 47px;
        /deep/ i {
            font-size: 14px !important;
            color: #888 !important;
        }
    }

    /deep/ .el-table__header-wrapper {
        border-width: 1px 1px 0 1px;
        border-style: solid;
        border-color: #ebeef5;
        width: auto;
    }

    /deep/ .el-table__header th {
        background: #fafbfa;
        color: #333;
    }

    /deep/ .el-table--enable-row-transition .el-table__body td {
        padding: 0;
    }

    /*/deep/ .el-table th>.cell {*/
        /*padding: 0 30px;*/
    /*}*/

    /deep/ .el-table td>.cell {
        padding: 0;
    }

    /deep/ .el-table tr td {
        padding: 0;
    }

    /deep/ .el-pagination {
        float: right;
        margin-top: 10px;
    }

    /deep/ .el-checkbox {
        width: 85px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }

    /deep/ .el-checkbox {
        margin: 0 15px 10px 0 !important;
    }
</style>
